<template>
    <div class="infoVue">
        <div class="section" style="display: flex;">
            <img :src="user.userInfo.avatar" style="width: 60px; height: 60px; border-radius: 50%; margin-right: 15px;">
            <div class="right">
                <div class="flex">
                    <span style="color: #000; font-size: 18px; font-weight: 600; padding-right: 20px;">{{ user.userInfo.nickname }}</span>
                    <el-tag>Lv{{ user.userInfo.level }}</el-tag>
                </div>
                <span class="show">{{ user.userInfo.phone  }}</span>
            </div>
        </div>
        <!-- <div class="section" style="display: flex; justify-content: space-between;" @click="dialogTableVisible=true">
            <span style="color: #999; font-size: 16px;">备注</span>
            <span class="show">添加备注</span>
        </div>
        <div class="section">
            <div style="display: flex; justify-content: space-between;" @click="dialogTableVisible10=true">
                <span style="color: #999; font-size: 16px;">标签</span>
                <span class="show">添加标签</span>
            </div>
            <div class="tagVue">
                <el-tag style="margin-right: 15px;" v-for="(o, i) in 2" :key="i">{{  i + "1000" }}</el-tag>
            </div>
        </div> -->
        <div class="section">
            <span style="color: #999; font-size: 16px;">消费记录</span>
            <div style="display: flex; flex-wrap: wrap; width: 100%;">
                <div class="li">
                    <span style="color: #666; font-size: 16px;">累计订单数</span>
                    <div style="height: 15px;"></div>
                    <span style="color: #000; font-size: 16px;">{{ user.userInfo.totalOrderCount }}</span>
                </div>
                <div class="li" style="text-align: center;">
                    <span style="color: #666; font-size: 16px;">累计消费金额</span>
                    <div style="height: 15px;"></div>
                    <span style="color: #000; font-size: 16px;">{{ user.userInfo.totalOrderAmount }}元</span>
                </div>
                <div class="li" style="text-align: right;">
                    <span style="color: #666; font-size: 16px;">客单价</span>
                    <div style="height: 15px;"></div>
                    <span style="color: #000; font-size: 16px;">{{ user.userInfo.totalOrderCount==0 ? 0 : user.userInfo.totalOrderAmount / user.userInfo.totalOrderCount }}元</span>
                </div>
                <div class="li">
                    <span style="color: #666; font-size: 16px;">累计退款订单数</span>
                    <div style="height: 15px;"></div>
                    <span style="color: #000; font-size: 16px;">{{ user.userInfo.totalRefundCount }}</span>
                </div>
                <div class="li" style="text-align: center;">
                    <span style="color: #666; font-size: 16px;">累计退款金额</span>
                    <div style="height: 15px;"></div>
                    <span style="color: #000; font-size: 16px;">{{ user.userInfo.totalRefundAmount }}元</span>
                </div>
            </div>
        </div>
        <div class="section">
            <span style="color: #999; font-size: 16px;">资产</span>
            <div style="display: flex; flex-wrap: wrap; width: 100%;">
                <div class="li">
                    <span style="color: #666; font-size: 16px;">配送券</span>
                    <div style="height: 15px;"></div>
                    <span style="color: #000; font-size: 16px;">{{ user.userInfo.deliveryCouponCount }}</span>
                </div>
                <div class="li">
                    <span style="color: #666; font-size: 16px;">用户余额</span>
                    <div style="height: 15px;"></div>
                    <span style="color: #000; font-size: 16px;">{{ user.userInfo.nowMoney }}</span>
                </div>
            </div>
        </div>


        <el-dialog title="操作备注" :visible.sync="dialogTableVisible" width="500px" top="30vh">
            <div class="dialogVue">
                <div style="display: flex;">
                    <div class="label">备注信息</div>
                    <textarea name="" id=""></textarea>
                </div>
                <div class="btnVue">
                    <div class="btn" @click="dialogTableVisible=false">取消</div>
                    <div class="btn">确定</div>
                </div>
            </div>
        </el-dialog>

        <el-dialog title="添加标签" :visible.sync="dialogTableVisible10" width="500px" top="30vh">
            <div class="dialogVue">
                <div style="display: flex;">
                    <div class="label">请选择标签</div>
                    <div style="flex: 1; padding-left: 15px;">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="复选框 A"></el-checkbox>
                            <el-checkbox label="复选框 B"></el-checkbox>
                            <el-checkbox label="复选框 C"></el-checkbox>
                            <el-checkbox label="禁用"></el-checkbox>
                            <el-checkbox label="选中且禁用"></el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <div class="btnVue">
                    <div class="btn" @click="dialogTableVisible10=false">取消</div>
                    <div class="btn">确定</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        props: {
            user: {
                type: Object,
                default(){
                    return {}
                }
            }
        },
        data(){
            return {
                dialogTableVisible: false,
                dialogTableVisible10: false,
                checkList: ['选中且禁用','复选框 A']
            }
        }
    }
</script>

<style lang="scss" scoped>
    :deep(.el-dialog__body ){
        padding: 30px 30px 30px !important;
    }
    .infoVue {
        width: 100%;
        padding: 0 20px ;
        .section {
            width: 100%;
            padding: 20px 0;
            border-bottom: 1px solid #f5f5f5;
            .right {
                flex: 1;
                height: 60px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 2px 0;
                .flex {
                    display: flex;
                    align-items: center;
                }
               
            }
            .show {
                color: #000; 
                font-size: 16px; 
                cursor: pointer;
            }
            .show:hover {
                opacity: 0.7;
            }
            .tagVue {
                display: flex;
                flex-wrap: wrap;
                margin-top: 15px;
            }
            .li {
                width: 33.33333%;
                display: flex;
                flex-direction: column;
                margin-top:25px;
            }
        }
        .dialogVue {
            padding-bottom: 30px;
            .label {
                color: #999;
            }
            textarea {
                flex: 1;
                height: 80px;
                padding: 15px;
                box-sizing: border-box;
                outline: none;
                margin-left: 15px;
                border: 1px solid #f5f5f5;
                color: #333;
                font-size: 14px;
                border-radius: 4px;
            }
            
        }
        .btnVue {
            display: flex;
            justify-content: flex-end;
            margin-top: 15px;
            .btn {
                width: 66px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                margin-left: 15px;
                cursor: pointer;
            }
            .btn:nth-child(1) {
                color: #333;
                border: 1px solid #f5f5f5;
                border-radius: 4px;
            }
            .btn:nth-child(2) {
                    color: #fff;
                    background: #0256ff;
                    border-radius: 4px;
                }
            }
        }
</style>